// 用户操作记录
<template>
  <div>

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>资料变更记录</span>
      </ul>

      <ul class="bread-nav-content-right">
        <a class="back" @click="goBack">返回</a>
      </ul>
    </el-row>


    <div class="content">

      <table class="myTable">
        <thead>
        <tr>
          <th>
            ID
          </th>
          <th>
            变更时间
          </th>
          <th>
            变更类别
          </th>
          <th>
            原始值
          </th>
          <th>
            变更值
          </th>
          <th>
            变更人
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list" :key="index">
          <td>
            {{index}}
          </td>
          <td>
            {{item.oper_time}}
          </td>
          <td>
            <!--<ul>-->
              <!--<li v-for="(subItem,subIndex) in item.oper_name" :key="subIndex">{{subItem}}</li>-->
            <!--</ul>-->
            {{item.oper_name}}
          </td>
          <td>
            {{item.old_data}}
          </td>
          <td>
            <!--<ul>-->
              <!--<li v-for="(subItem,subIndex) in item.change_data" :key="subIndex">{{subItem}}</li>-->
            <!--</ul>-->
            {{item.change_data}}
          </td>
          <td>
            {{item.oper_admin}}
          </td>
        </tr>
        </tbody>
      </table>

      <div style="margin-top:8px">
        <el-tag type="info">注意:登录日志最少被保留7天,超过7天部分最多保留最后20条.</el-tag>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'record',
  data() {
    return {
      // 查詢參數
      params: {
        username: null,
        perpage: 10, // 每页数量
      },
      // 分页信息
      pagination: {
        currentPage: 1,
        totalCount: 0,
        defaultPageSize: 10,
      },
      list: null,
      loading: true,
    }
  },
  filters: {},
  computed: {
    ...mapGetters(['info']),
  },
  created() {
    this.checkParams(this.$route.params)
    // 拉取数据
    this.fetchData()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },

    checkParams(params) {
      if (params && params.username && params.username !== ':username') {
        this.params.username = params.username
      } else {
        this.params.username = this.info.username
      }
    },
    // 获取数据
    fetchData() {
      this.loading = true
      this.list = []
      this.$store
        .dispatch('GetLogsList', {
          username: this.params.username, // 路由参数
        })
        .then(response => {
          this.loading = false
          for (const key in response) {
            if (key !== 'message') {
              this.list.push(response[key])
            }
          }
        })
    },

    // 当前页变化
    handleCurrentChange(value) {
      this.pagination.currentPage = value
      this.fetchData()
    },

    // 每页显示数量变化
    handlePageSizeChange(value) {
      this.params.perpage = value
      this.fetchData()
    },
  },
  watch: {
    $route(to, from) {
      // 监控路由变化,从新加载数据
      if (to.params !== from.params) {
        this.checkParams(to.params)
        if (this.pagination.currentPage !== 1) {
          this.pagination.currentPage = 1 // 默认查询第一页,当前页变化,会触发数据拉取
        } else {
          this.fetchData()
        }
      }
    },
  },
}
</script>
<style scoped>

  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }

  .content{
    padding: 10px;
  }

  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
    text-align: center;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }

</style>

